<template> 
  <div class="apply-status" :class="status">
    {{text}}
  </div>
</template>

<script>
  export default {
    name: 'ApplyStatus',
    data () {
      return {
        status: '',
        text: ''
      };
    },
    props: ['applyStatus'],
    watch: {
      'applyStatus': function () {
        let routeName = this.$route.name === 'ApplicationDetail';
        if (this.applyStatus === 2) {
          // 已審批
          this.status = 'pass';
          this.text = '已审批';
        } else if (this.applyStatus === 3) {
          // 已駁回
          this.status = 'fail';
          this.text = '已驳回';
        } else if (!routeName && this.applyStatus === 1) {
          // 審批記錄 - 待審批
          this.status = 'wait';
          this.text = '待审批';
        } else if (routeName && this.applyStatus === 1) {
          // 我的申請 - 審批中
          this.status = 'pending';
          this.text = '审批中';
        } else if (this.applyStatus === 5) {
          this.status = 'cancel';
          this.text = '已取消';
        } else if (this.applyStatus === 6) {
          this.status = 'waitCheck';
          this.text = '待查阅';
        } else if (this.applyStatus === 7) {
          this.status = 'Checked';
          this.text = '已查阅';
        }
      }
    },
    mounted () {
      // console.log('详细状态',this.applyStatus);
    }
  };
</script>

<style lang="scss" scoped>
  @import '../../assets/style/variable';
  .apply-status{
    width: getRem(24);
    height: getRem(116);
    position: absolute;
    right: getRem(32);
    top: 0;
    font-size: getRem(24);
    line-height: getRem(30);
    color: #fff;
    text-align: center;
    padding: getRem(6) getRem(16) 0;
    &.wait{
      background: #678ff7;
    }
    &.pass{
      background: #46c33b;
    }
    &.fail{
      background: #d91616;
    }
    &.pending{
      background: #403f46;
    }
    &.cancel{
      background: #fb5276;
    }
    &.waitCheck{
      background: #0FBCF4;
    }
    &.Checked{
      background: #26D4CA;
    }
    &:after{
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      left: 0;
      bottom: 0;
      border-left: getRem(28) solid transparent;
      border-right: getRem(28) solid transparent;
      border-bottom: getRem(20) solid #fff;
    }
  }
</style>
